<template>
    <div class="header">
        <div class="content-wrapper">
            <div class="avatar">
                <img :src="seller.avatar" width="64" height="64" alt="">
            </div>
            <div class="content">
                <div class="title">
                    <span class="brand"></span>
                    <span class="name">{{seller.name}}</span>
                </div>
            </div>
            <div class="description">
                {{seller.description}}{{seller.deliveryTime}}分钟送达
            </div>
            <div class="support" v-if="seller.supports">
                <span class="icon"></span>
                <span class="text">{{seller.supports[0].description}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'

export default {
    props:{
        seller:{
            type:Object
        }
    }
}
</script>
<style lang="stylus">
    @import '../../stylus/mixin.styl'
    .header
        position relative
        overflow hidden
        color #fff
        background rgba(7,17,27,0.5)
        .content-wrapper
            position relative
            padding 24px 12px 18px 24px
            font-size 0
            .avatar
                display inline-block
                vertical-align top
                img
                    border-radius 2px
            .content
                display inline-block
                margin-left 16px
                .title
                    margin 2px 0 8px 0
                    .brand
                        display inline-block
                        vertical-align top
                        width 30px
                        height 18px
                        bg-image('brand')
                        background-size 30px 18px
                        background-repeat no-repeat
</style>